const path = require('path');

// 分离文本的插件
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports={
    mode:"development",
    // 出口文件
    entry:"./src/js/index.js",
    output:{
        // 输出的目录,绝对路径
        // path:"./a",
        path:path.join(__dirname,"./dist"),

        // 输出的文件名,相对于path的路径
        filename:"./js/bundle.js"
    },

    // 加载器配置
    module:{
        rules:[

            // 识别css的规则
            // { 
            //     test: /\.css$/, //正则
            //     use: [ 'style-loader', 'css-loader' ]
            //     //使用style-loader和css-loader进行处理，它是从后向前处理
            //     //css-loader解析css语法
            //     //style-loader是把css代码追加到html页面中
            // }



            {
                test: /\.css$/, // 以.css结尾的文件
                use: ExtractTextPlugin.extract({ // 从一个已存在的 loader 中，创建一个提取(extract) loader。
                    fallback: "style-loader", 
                    use: "css-loader"  // 将资源转换成一个CSS单独文件
                })
            }
        ]
    },
    plugins:[
        // 以output.path为基准写路径
        new ExtractTextPlugin("./css/index.css"),
    ]
}


